<!--新增跑马灯-->
<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="rankShow"
      width="30%"
      @close="cancle"
      center
    >
      <el-form
        size="small"
        :model="addForm"
        label-position="right"
        :rules="FormRules"
        label-width="120px"
        ref="form"
        class="demo-form-inline"
      >
        <el-form-item label="产品分类" prop="cate">
          <el-select v-model="addForm.cate" placeholder="请选择产品分类">
            <el-option
              v-for="item in productCataOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择产品" prop="relation">
          <div style="">
            <div class="product-img">
              <div
                class="product-img-box"
                v-for="(item, idx) in addForm.relation"
                :key="item.id"
              >
                <el-tooltip effect="dark" :content="item.name" placement="top">
                  <img style="" :src="item.pic" alt="" />
                </el-tooltip>

                <i
                  @click="delProduct(idx, item.id)"
                  style="color: #ccc; font-weight: bold"
                  class="el-icon-close i2"
                ></i>
              </div>

              <div
                style="line-height: 96px; margin-right: 10px"
                v-if="addForm.relation.length < 1"
              >
                <div class="uploadPic" @click="selectPic()">
                  <i
                    style=" font-size: 40px; color: #ccc; font-weight: bold; "
                    class="el-icon-plus i1"
                  ></i>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
            maxlength="4"
            v-model="addForm.title"
            placeholder="请输入推荐理由标题"
          ></el-input>
          <!--<div v-if="titleError" style="font-size: 12px;color: red;height: 15px">{{ errorMsg }}</div>-->
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="addForm.content"
            placeholder="请输入详细推荐内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容形式">
          <el-radio v-model="addForm.type" label="2">无</el-radio>
          <el-radio v-model="addForm.type" label="0">上传链接</el-radio>
          <el-radio v-model="addForm.type" label="1">选择文章内容</el-radio>
        </el-form-item>
        <el-form-item v-if="addForm.type == 0" label="链接地址" prop="url">
          <el-input
            v-model="addForm.url"
            placeholder="请输入链接地址"
          ></el-input>
        </el-form-item>
        <div v-if='addForm.type == 1'>
          <el-form-item label="文章分类" prop="cid">
            <el-cascader
              v-model="addForm.cid"
              :options="articleOptions"
              :props="{ emitPath: false }"
              @change="changeCate"
              clearable
            />
          </el-form-item>
          <el-form-item label="文章链接"  prop="articleId">
            <el-select
              v-model="addForm.articleId"
              placeholder="请选择文章链接"
              clearable
            >
              <el-option
                v-for="item in articleList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rankConfirm">保 存</el-button>
        <el-button @click="cancle">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addProductRankApi,
  detailProductRankApi,
  productApi,
  updateProductRankApi
} from "@/api/rank";
import {
  getArticleInfo,
  getArticleList,
  getArticleListTree
} from "@/api/article";

export default {
  data() {
    const validatecreditRatio = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入推荐理由标题"));
      } else if (value.length > 4) {
        callback(new Error("不超过4个字"));
      } else {
        callback();
      }
    };
    return {
      rankShow: false,
      articleList: [],
      addForm: {
        cate: "",
        title: "",
        relation: [],
        content: "",
        type: "0",
        url: "",
        productIdList: [],
        articleId: "",
        cid: ''
      },
      productCataOptions: [],
      articleOptions: [
        {
          value: "1",
          label: "分类1"
        },
        {
          value: "2",
          label: "分类2"
        }
      ],
      FormRules: {
        cate: [{ required: true, message: "请选择产品分类", trigger: "blur" }],
        // cate: [{ required: true, message: "请选择产品分类", trigger: "change" }],
        url: [{ required: true, message: "请输入链接地址", trigger: ["blur","change"] }],
        cid: [{ required: true, message: "请选择文章分类", trigger: ["blur","change"] }],
        articleId: [
          { required: true, message: "请选择文章链接", trigger: "change" }
        ],
        relation: [{ required: true, message: "请选择产品", trigger: "blur" }]
        // title: [{ required: true, trigger: ["blur","change"], validator: validatecreditRatio }]
      }
    };
  },
  async created() {
    // 产品分类
    this.productCataOptions = await this.$getDictData("rank_product_cate");
    await this.getCidList();
  },
  methods: {
    getArticleList(id) {
      getArticleList({
        cateId: id,
        pageNum: 1,
        pageSize: 1000,
        type: 1,
      }).then(res => {
        this.articleList = res.data.list;
      });
    },
    getCidList() {
      getArticleListTree().then(res => {
        this.articleOptions = res.data;
      });
    },
    async openDialog(row) {
      if (row) {
        detailProductRankApi(row.id).then(async res => {
          const data = res.data;
          let productInfo = await productApi(data.productId);
          let articleInfo
          if(data.articleId) {
            articleInfo = await getArticleInfo(data.articleId);
            this.getArticleList(articleInfo.data.cateId);
          }
          let relation = [
            {
              id: productInfo.data.id,
              name: productInfo.data.name,
              pic: productInfo.data.pic
            }
          ];

          this.addForm = {
            id: row.id,
            relation,
            type: data.type + "",
            cate: data.cate,
            cid: articleInfo && articleInfo.data.cateId,
            articleId: data.articleId,
            title: data.title,
            content: data.content,
            url: data.url,
            productIdList: [data.productId]
          };
        });
      }
      this.rankShow = true;
    },
    cancle() {
      this.rankShow = false;
      this.addForm = {
        cate: "",
        title: "",
        relation: [],
        content: "",
        type: "0",
        url: "",
        productIdList: [],
        articleId: "",
        cid: ''
      };
    },
    changeCate(val) {
      this.addForm.cid = val
      this.getArticleList(this.addForm.cid);
      if(val) {
        // if (this.addForm.cid.length > 0) {
        //   this.addForm.cid = this.addForm.cid[this.addForm.cid.length - 1];
        //   this.getArticleList(this.addForm.cid);
        // }
      } else {
        this.addForm.articleId = ''
      }

    },
    delProduct(idx, id) {
      console.log(idx, id, this.addForm.relation, this.addForm);
      this.addForm.productIdList.splice(idx, 1);
      const i = this.addForm.relation.findIndex(v => {
        return v.id === id;
      });
      console.log(this.addForm, "addForm");
      if (i != -1) {
        this.addForm.relation.splice(i, 1);
      }
    },
    selectPic() {
      let that = this;
      that.$modalGoodList(
        function(row) {
          if (row) {
            let app = row.map(v => {
              return {
                id: v.id,
                name: v.name,
                pic: v.pic
              };
            });
            that.$set(that.addForm, "relation", app);
            that.$refs.form.validateField("relation");
            this.$set(
              that.addForm,
              "productIdList",
              row.map(v => {
                return v.id;
              })
            );
          }
        },
        "1",
        that.addForm.productIdList
      );
    },
    rankConfirm() {
      let params = JSON.parse(JSON.stringify(this.addForm));
      console.log("params", params)
      params.productId = this.addForm.productIdList[0];
      params.productName = this.addForm.relation[0] && this.addForm.relation[0].name;
      delete params.productIdList;
      delete params.relation;
      this.$refs.form.validate(validate => {
        if (validate) {
          if (this.addForm.id) {
            updateProductRankApi(params).then(res => {
              this.$message.success("修改产品榜单成功！");
              this.rankShow = false;
              this.$emit("getList");
            });
          } else {
            addProductRankApi(params).then(res => {
              this.$message.success("新增产品榜单成功！");
              this.rankShow = false;
              this.$emit("getList");
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-select,
/deep/ .el-cascader {
  width: 100%;
}

.product-img {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  .product-img-box {
    position: relative;
    .i2 {
      position: absolute;
      right: -1px;
      top: -5px;
    }
  }
  .uploadPic {
    width: 96px;
    height: 96px;
    // margin-left: 10px;
    background: #eeeeee;
    border-radius: 8px;
    position: relative;

    .i1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  img {
    width: 96px;
    height: 96px;
    margin-right: 13px;
  }
}
</style>
